<template>
  <div class="all">
    <div class="head">
      <div class="w info">
        <div class="user-info">
          <template v-if="isUser()">
            <div class="login">
              <router-link to="login">登录</router-link>
            </div>
            <div class="register">
              <router-link to="register">注册</router-link>
            </div>
          </template>
          <template v-else>
            <div class="username" @click="toUser">{{$root.$data.user.roleName}}</div>
            <div style="cursor: pointer" class="exit" @click="exit">退出登录</div>
          </template>
        </div>
        <div class="nav">
          <div class="nav-item">
            <router-link to="ShopCart">购物车</router-link>
          </div>
          <div class="nav-item">
            <router-link to="Order">我的订单</router-link>
          </div>
          <div class="nav-item">
            <router-link to="maIndex" target="_blank">后台管理</router-link>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="w">
        <div style="height: 120px">
          <div :style="top > 80 ? 'position: fixed' : ''" class="home-search">
            <search></search>
          </div>
        </div>
        <router-view></router-view>
      </div>
    </div>
    <div
      v-if="$root.$data.user != null && $route.path !== '/ShopCart' && $route.path !== '/Settlement' && $root.$data.cart != null && $root.$data.cart.length !== 0"
      class="shop-cart"
    >
      <shop-cart></shop-cart>
    </div>
  </div>
</template>

<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

a {
  color: #777;
  text-decoration: none;
}

.w {
  width: 1000px;
  margin: 0 auto;
}

.home-search {
  height: 120px;
  background-color: #eee;
  z-index: 2000;
  top: 0;
}

.shop-cart {
  position: fixed;
  bottom: 100px;
  right: 100px;
}

.head {
  background-color: #ddd;
  width: 100%;
}

.info {
  font-size: 12px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user-info {
  display: flex;
}

.user-info > *,
.nav > * {
  margin: 0 5px;
}

.user-info > * > a:hover,
.nav > * > a:hover {
  color: #409eff;
}

.nav {
  display: flex;
}

.content {
  background-color: #eee;
}

.search,
.banner-context {
  display: flex;
  align-items: center;
}

.search {
  height: 120px;
  font-size: 0;
}

.logo,
.category {
  width: 230px;
  margin-right: 20px;
}

.logo {
  color: #409eff;
  font-size: 35px;
  font-weight: bold;
  text-align: center;
  text-shadow: -4px 4px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.search-input > .input {
  width: 500px;
}

.search-input > button {
  height: 40px;
  width: 100px;
  border: none;
  outline: none;
  background-color: #409eff;
  position: relative;
  top: 1px;
  color: #fff;
}

.category {
  background-color: #666;
  padding: 20px 0;
}

.cate-item {
  padding: 5px 0 5px 20px;
}

.cate-item:hover {
  background-color: #aaa;
}

.cate-item > a {
  color: #fff;
  display: inline-block;
  margin-right: 10px;
}

.cate-item > a:hover {
  color: red;
}

.banner {
  width: 750px;
}

.username {
  cursor: pointer;
}

.username:hover {
  color: #409eff;
}

.exit:hover {
  color: red;
}
</style>

<script>
import search from "../components/search";
import shopCart from "../components/shopCart";

export default {
  name: "home",
  data: function() {
    return {
      user: null,
      top: 0
    };
  },
  mounted() {
    this.getUser();
    window.addEventListener("scroll", this.scroll);
  },
  methods: {
    scroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      this.top = scrollTop;
    },
    isUser() {
      return this.$root.$data.user == null;
    },
    exit() {
      this.axios.get("/user/exit").then(res => {
        this.$message({
          showClose: true,
          message: res.data.msg,
          type: "success"
        });
        this.getUser();
      });
    },
    getShopCarts() {
      this.axios.get("/shopCart/front/getAll").then(res => {
        this.$root.$data.cart = res.data.data;
      });
    },
    getUser: function() {
      this.axios.get("/user/user").then(res => {
        this.$root.$data.user = res.data.data;
        if (this.$root.$data.user != null) {
          this.getShopCarts();
        }
      });
    },
    toUser() {
      this.$router.push({ path: "/userInfo" });
    }
  },
  components: {
    search: search,
    shopCart: shopCart
  }
};
</script>
